import React, { Component } from "react";
// propTypes
import PropTypes from 'prop-types';
// url
import requestUrl from "@api/requestUrl";
// API
import { requestData } from "@api/common";
// antd
import { Radio } from "antd";

class RadioComponent extends Component {
    constructor(props){
        super();
        console.log(props)
        this.state = {
            props: props.propsKey,
            options: [],
            style: props.style,
            // change value
            name: props.name,
            value: []
        }
    }  

    componentDidMount(){
        this.getSelectList();
    }
    // 从props中获取state,传入的props映射到state上面
    static getDerivedStateFromProps(nextProps, prevState){  // 1、静态的，无法获取 this.state，2、必须有返回
        let { value, name } = nextProps;
        console.log('getDerivedStateFromProps===>nextProps', nextProps, value, name)
        if(!value) { return false; }
        if(value !== prevState.value) {
            return {
                value: value
            }
        }
        // 直接放在最后面
        return null;
    }


    // 请求数据
    getSelectList = () => {
        console.log(this.props)
        const url = this.props.url;
        const requestParmas = {
            url: requestUrl[url],
            method: this.props.method,
            data: {}
        }
        // 不存在 url 时，阻止
        if(!requestParmas.url) { return false; }
        // 接口
        requestData(requestParmas).then(response => {
            this.setState({
                options: response.data.data.items
            })
        })
    }
    // select onchang
    onChange = (e) => {
        const _value = e.target.value;
        console.log('current value============>', _value)
        this.setState({ value: _value })
        
        this.triggerChange(_value);
    }
    triggerChange = (changedValue) => {
        const onChange = this.props.onChange;
        if (onChange) {
          onChange(changedValue);
        }
    };
    

    render(){
        const { value, label } = this.state.props;
        let defaultValue = this.state.options[0]
        console.log(this.state.options, 'defaultValue====>', defaultValue, value)
        return (
            <Radio.Group 
                defaultValue='40'
                buttonStyle="solid" 
                value={this.state.value}
                onChange={this.onChange}
            >
                {
                    this.state.options && this.state.options.map(elem => {
                        console.log('Radio.ButtonRadio.ButtonRadio.Button', elem[value], elem[label])
                        return (
                            <Radio.Button 
                                size='small' 
                                defaultChecked='true'
                                value={elem[value]}
                                key={Number(elem[value])}
                            >
                                {elem[label]} 
                            </Radio.Button>
                        )
                    })
                }
            </Radio.Group>
        )
    }
}

// 校验数据类型
RadioComponent.propTypes = {
    formConfig: PropTypes.object
}
// 默认
RadioComponent.defaultProps = {
    formConfig: {}
}
export default RadioComponent;